<template>
  <!-- 单品海报 -->
  <view class="single-goods-posters">
    <!-- 这里是状态栏 -->
    <view class="status_bar"></view>
    <!-- 画布，隐藏状态，生成海报图片时用 -->
    <view class="ctx">
      <canvas canvas-id="ctx" style="width: 375px; height: 667px;"></canvas>
    </view>
    
    <!-- 编辑海报区 -->
    <view class="edit-poster">
    
      <!-- 编辑区 -->
      <view class="edit-box" :style="{ background: `url(${posterValData.url}) 0 0 no-repeat` }">
        <!-- 头部小标题 -->
        <view class="header-title flex flex-ai-c flex-jc-c">
          <i-icon icon="iconxing" type="mutilple" size="50rpx"></i-icon>
          <text class="text">推荐一款低价车给您，请查收</text>
        </view>
    
        <!-- 大标题 -->
        <view class="title-box">
          <view class="big-title">
            <input type="text" v-model="posterData.bigTitle" maxlength="7" :style="{color: posterValData.color}" class="text" />
            <i-icon icon="iconquxiaoxunjia" color="#DFDFDF" @click.native.stop="resetVal('bigTitle')"></i-icon>
          </view>
        </view>
    
        <!-- 商品列表 -->
        <view class="goods-box flex flex-ai-c">
          <view class="goods-list">
            <template v-for="goodsItem in posterData.goods">
              <view class="item flex flex-ai-c">
                <view class="img-box">
                  <image :src="goodsItem.img" mode="widthFix" class="img"></image>
                </view>
                <!-- 商品信息 -->
                <view class="goods-info">
                  <view class="goods-title">
                    <text class="big-title">{{ goodsItem.carBrand }}</text>
                    <text class="small-title">{{ goodsItem.carType }}</text>
                  </view>
                  <view class="price flex flex-jc-sb flex-ai-c">
                    <text class="small-price">指导价：{{ goodsItem.guidePrice }}</text>
                    <text class="big-price">￥{{ goodsItem.actualPrice }}</text>
                  </view>
                </view>            
              </view>
            </template>
            <!-- <view class="btn" v-show="!goodsItem.img">
              <u-icon name="plus" :size="80" color="#d6d6d6"></u-icon>
            </view> -->
          </view>          
        </view>
        
        
        <!-- 小标题 -->
        <view class="title-box">
          <view class="small-title">
            <input type="text" v-model="posterData.smallTitle" maxlength="12" :style="{color: posterValData.color}" class="text" />
            <i-icon icon="iconquxiaoxunjia" color="#DFDFDF" @click.native.stop="resetVal('smallTitle')"></i-icon>
          </view>
        </view>
        
        <!-- 底部店铺信息 -->
        <view class="store-info flex flex-ai-c flex-jc-sb">
          <view class="info-box flex flex-ai-c">
            <!-- 店铺logo -->
            <view class="logo">
              <image :src="posterData.store.headerImg" mode="widthFix" style="width: 100%;height: 100%;"></image>
            </view>
            
            <!-- 店铺名 -->
            <view class="store-text">
              <view class="big-text">{{ posterData.store.storeName }}</view>
              <view class="small-text">长按识别 进店优惠</view>
            </view>
          </view>
          
          <!-- 店铺二维码 -->
          <view class="store-qrcode">
            <image :src="posterData.store.qrcode" mode="widthFix" style="width: 100%;height: 100%;"></image>
          </view>
        </view>
      </view>
    </view>
    
    <view class="footer-box">
      <!-- 背景图列表预选 -->
      <view class="bg-img-box">
        <u-loading :show="loadingBgFlag" mode="circle" size="40"></u-loading>
        
        <view class="bg-img-list">
          <template v-for="(item, index) in bgimglist">
            <view :key="item.id" :class="['bg-img-item', posterValData.id === item.id ? 'bd-active' : '']">
              <image :src="item.url" @click="selectBgPoster(item)" mode="aspectFill"></image>
            </view>
          </template>
        </view>
      </view>
    
      <!-- 底部按钮 -->
      <view class="footer-btns flex flex-ai-c">
        <!-- 返回 -->
        <view class="btn-goback" @click="goback()"><u-icon name="arrow-left" size="48" color="#fff"></u-icon></view>
        
        <view class="btn-box flex flex-ai-c">
          <!-- 更换商品 -->
          <view class="update-goods" @click="goback()">更换商品</view>
    
          <!-- 分享按钮 -->
          <view class="btn-share" @click="goShare()">
            <i-icon icon="iconshare" size="34rpx" color="#343434"></i-icon>
            <text class="text">去分享</text>
          </view>          
        </view>
      </view>
      
      <!-- 分享弹窗选项 -->
      <i-share-popup v-model="sharePopupShow" @change="handleShare"></i-share-popup>
    </view>
  </view>
</template>

<script src="./mutipleGoodsPosters.js"></script>

<style lang="scss" scoped>
@import './mutipleGoodsPosters.scss';
</style>
